textarea,
group,
text,
input,
select {
  font-size: 10.5px;
  user-select: none;
}
textarea:focus,
input:focus,
select:focus {
  outline: none;
}
#ui-root select {
  background-color: transparent;
  color: var(--color-studio-list-text, var(--color-wasabi-list-text));
}
select option {
  padding-left: 5px;
  width: 300%;
}
select option[selected] {
  font-weight: bold;
}
select::before {
  padding-left: 5px;
  content: var(--colheader, none);
  display: block;
  position: sticky;
  top: var(--colheadertop, 0);
  left: 0;
  background-color: black;
  color: silver;
}
.webamp--img {
  background-image: var(--background-image);
  background-position: top 0 left 0;
}
.webamp--img:active {
  background-image: var(--down-background-image, var(--background-image));
}
.webamp--img:hover {
  background-image: var(--hover-background-image, var(--background-image));
}

/* TODO: Should this fallback to hover? */
.webamp--img:hover:active {
  background-image: var(--down-background-image, var(--background-image));
}

.webamp--img.active {
  background-image: var(--active-background-image, var(--background-image));
}

button {
  border: none;
  background: transparent;
  padding: 0;
}
slider {
  overflow: hidden;
  --thumb-left: 0px;
  --thumb-top: 0px;
  outline: none;
}
slider > div {
  display: none;
}
slider::after {
  content: "";
  position: absolute;
  left: var(--thumb-left);
  top: var(--thumb-top);
  width: var(--thumb-width);
  height: var(--thumb-height);
  background-image: var(--thumb-background-image);
  pointer-events: none;
}
slider:hover:after {
  background-image: var(
    --thumb-hover-background-image,
    var(--thumb-background-image)
  );
}
/* slider:active:after { */
slider:active:after,
.eq-surf slider:focus:after {
  background-image: var(
    --thumb-down-background-image,
    var(--thumb-background-image)
  );
}
text {
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  /* padding: 2px; */
  --valign: center;
}
text i {
  pointer-events: none;
  font-style: normal;
}
text wrap {
  display: block;
  /* white-space: nowrap; */
  background-image: inherit;
  background-size: 0px;
  position: relative;
  /* line-height: 1; */
  height: 100%;
  width: var(--full-width);
  min-width: 100%;
  font-family: monospace;
  white-space: pre;
}
text wrap {
  margin-left: 2px;
}
text wrap[font="TrueType"] {
  /* needed for titlebar */
  font-size: 10.5px;
  line-height: 10px; 
  vertical-align: var(--valign, center);
  text-align: var(--align, center);
}
text wrap[font="BitmapFont"] {
  display: flex;
  white-space: nowrap;
  /* vertical align: */
  /* align-items: center; */
  align-items: var(--valign, center);
  justify-content: var(--align, center);
}
text span {
  user-select: none;
  pointer-events: none;
  /* display: inline-block; */
  background-image: inherit;
  /* vertical-align: bottom; */
  color: transparent;
  width: var(--charwidth);
  height: var(--charheight);
  margin-right: var(--hspacing, 0);
  background-position-x: var(--x);
  background-position-y: var(--y);
  overflow: hidden;
  flex-shrink: 0;
  background-repeat-x: no-repeat;
}
/* body > div *  */
container {
  position: absolute;
}
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.popup hr {
  margin-block-start: 3px;
  margin-block-end: 3px;
  border-bottom: none;
}
/* frame2 {
  box-shadow: inset 0 0 5px red;
} */

/* Lets register all supported tag's default property here: */
albumart,
animatedlayer,
button,
colorthemeslist,
componentbucket,
eqvis,
grid,
group,
layer,
layout,
progressgrid,
slider,
status,
text,menu,frame2,
vis,
wasabiframe,
wasabititlebar,
windowholder
{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  /* overflow: hidden; */
}
group {
  overflow: visible;
}
albumart {
  /* background-size: cover; */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center!important;
}
wasabititlebar {
  text-align: center;
}
grid,
progressgrid {
  display: flex;
}
grid *,
progressgrid * {
  height: 100%;
  background-image: var(--background-image);
}
grid middle {
  flex-grow: 1;
}
componentbucket {
  overflow: hidden;
}
componentbucket > wrapper {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  transition: top 0.5s, left 0.5s;
}
componentbucket.vertical > wrapper {
  flex-direction: column;
  height: auto;
  width: 100%;
}
componentbucket > wrapper > group {
  position: relative;
}
group.x-fade > * {
  transition: opacity var(--fade-in-speed, 0.5);
}
group.x-fade > .fading-out {
  transition: opacity var(--fade-out-speed, 0.25);
}

vis > canvas {
  display: block;
}
animatedlayer {
  background-repeat: no-repeat;
}
.autowidthsource {
  width: auto;
}

/* .pl {
        background: white;
        color: black;
      } */

/* titleBar active state */
[inactivealpha="0"] {
  opacity: 0;
}
[inactivealpha="128"] {
  opacity: 0.5;
}
container:focus-within [activealpha="0"],
container:active [activealpha="0"] {
  opacity: 0;
}
container:focus-within [inactivealpha],
container:active [inactivealpha] {
  opacity: 1;
}
container:not(:active):not(container:focus-within) .webamp--img.inactivable {
  background-image: var(--inactive-background-image, var(--background-image));
}

.resizing {
  position:fixed; 
  border: 1px solid blue;
  background-color: rgba(74, 74, 251, 0.205);
  z-index: 1000;
  box-sizing: border-box;
  transition: width 0.1s, height 0.1s, left 0.1s, top 0.1s;
}


#wasabi\.menubar,
#wasabi\.menubar\.pl,
#wasabi\.menubar\.ml {
  background: var(--color-wasabi-window-background);
}


menu {
  /* pointer-events: unset; */
  overflow: visible;
}
/* FAKE POPUP */
.fake-popup {
  width: 200px;
  height: 300px;
  background-color: yellow;
  z-index: 1000;
}
menu > .popup{
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
}
.open > .popup{
  display: block;
}

.popup-menu-container{
  position: absolute;
  margin: 0;
  background: white;
  padding: 0;
  /* border: 2px solid gray; */
  border: 1px solid #C9CCD2;
  z-index: 100;
  width: auto;
  display: inline-block;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  font-size: 10.5px;
}
ul.popup-menu-container li {
  display: flex;
  padding: 2px 10px;
  padding: 0;
  white-space: nowrap;
}
ul.popup-menu-container li > span {
  padding: 4px 0;
}
ul.popup-menu-container li:hover > span {
  background: #316ac5;
  color: white;
}

.popup-menu-container .checkmark{
  min-width: 15px;
  text-align: center;
}
.popup-menu-container .keystroke{
  min-width: 20px;
  flex-grow: 1;
  /* background: fuchsia; */
  text-align: right;
  padding-left: 10px;
}
.popup-menu-container .chevron{
  min-width: 15px;
  text-align: center;
  font-size: smaller;
  line-height: 1;
}

/* nested popup */
.popup-menu-container > li > .popup-menu-container{
  left: calc(100% - 3px);
  display: none;
}
.popup-menu-container > li:hover > .popup-menu-container{
  display: unset;
}

/* COMPONENT BUCKET */
componentbucket[id="component list"] wrapper button {
  width: 44px;
  height: 34px;
  /* border: none; */
  /* border: 2px solid fuchsia; */
  margin: 0 1px;
  position: unset;
    display: inline-block;
    /* left: unset; */
    /* top: unset; */
    /* background: red; */
}
